/*
* @Author: zhanghang
* @Date:   2018-06-20 18:00:02
* @Last Modified by:   zhanghang
* @Last Modified time: 2018-06-20 18:34:18
*/

import Vue from 'vue'
const component = {
  props: {
    active: {
      type: Boolean,
      // required: true,
      default: false,
      validator (value) {
        return typeof value === 'boolean'
      }
      // default () {
      //   return {

      //   }
      // }
    },
    propOne: String
  },
  template: `<div>this is componet{{text}}
  <input type="text" v-model.number="propOne" />
  <span @click="handleChange">{{propOne}}</span>
  <span v-show="active">see me if active</span>
  </div>`,
  methods: {
    handleChange () {
      console.log('enter handleChange')
      console.log('this', this)
      this.$emit('change')
    }
  },
  data () {
    return {
      text: 123
    }
  }
}
// Vue.component('CompOne', component)
new Vue({
  el: '#root',
  components: {
    CompOne: component
  },
  data: {
    prop1: 'prop1222'
  },
  methods: {
    handleChange () {
      this.prop1 += 1
    }
  },
  template: `<div>
  <comp-one :active="true" :prop-one="prop1" @change="handleChange"></comp-one>
  <comp-one :active="true" :prop-one="prop1" @change="handleChange"></comp-one>
  </div>`
})
